<template>
  <div class="content">
    <common-head :showIcon="false" :showBackButton="true"></common-head>
    <div class="container">
      <div class="abnormal-device-container">
        <div class="title">
          <h3>异常设备处理</h3>
        </div>
        <div class="device-info">
          <van-cell :title="`停车点：`" :value="message.parkingId" />
          <van-cell :title="`泊位：`" :value="message.carportCode" />
          <van-cell :title="`设备编码：`" :value="message.deviceCode" />
          <van-cell :title="`设备类型：`" :value="message.deviceType === '10' ? '摄像头' : message.deviceType === '20' ? '地锁' : '其他'" />
          <van-cell title="处理描述：" />
          <van-field v-model="message.handlingMethod" rows="4" autosize type="textarea" placeholder="请输入"
            show-word-limit />
          <van-button type="primary" block @click="confirm">
            确认
          </van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import commonHead from "../../components/xc/commonHead.vue";
export default {
  components: {
    commonHead
  },
  data() {
    return {
      description: "",
      message: {}
    };
  },
  created() {
    this.message = this.$route.params.message;
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    async confirm() {
      // 提示确认提交
      const confirmResult = await this.$dialog.confirm({
        title: '确认提交',
        message: '是否确认提交处理结果？'
      });
      if (confirmResult) {
        try {
          // 构建请求数据
          const requestData = {
            id: this.message.id,
            handle: 1
            // description: this.description
          };
          // 调用接口更新消息状态
          const response = await this.baseService.post('/msg/noticeInfo/update', requestData);
          if (response.code === 200) {
            this.$toast("处理成功");
            // 处理成功后返回上一页
            this.goBack();
          } else {
            this.$toast("处理失败");
          }
        } catch (error) {
          console.error("处理失败: ", error);
          this.$toast("处理失败");
        }
      }
    }
  }
};
</script>

<style scoped>
/* 	.title {
        margin-left: 0.3rem;
        margin-top: 0.4rem;
    } */

  .content {
    height: 100vh;
  }

  .container {
    height: 100%;
    width: 100%;
    padding: 10px;
    background-image: linear-gradient(to right, #cee7ff, #a5d3ff);
  }

  .title {
    margin: 10px;
    font-weight: 700;
  }


  .abnormal-device-container {
    padding: 10px;
    background-color: white;
    height: 100%;
  }

  .device-info {
    background-color: #e6f2ff;
    padding: 6px;
    margin-top: 0.2rem;
    border-radius: 0.2rem;
    height: 90%;
  }

  .confirm-btn {
    margin-top: 1rem;
    padding: 0 1rem;
  }

  /deep/ .van-cell {
    background-color: transparent;
    /* border-bottom: 1px solid rgba(0, 0, 0, 0.1); */
  }

  /deep/ .van-field__body {
    background-color: white;
    border-radius: 0.1rem;
    padding: 0.5rem;
  }

  /deep/ .van-button--primary {
    background-color: #4080ff;
    border-color: #4080ff;
    border-radius: 0.1rem;
    width: 100%;
    margin-top: 0.2rem;
  }
</style>